// import { defineComponent } from "vue";
// import styles from "./Navs.module.less";
// import { useStore as useNavsStore } from "@/store/navs";
// import { useRoute, useRouter } from "vue-router";
// import { DownOutlined } from "@ant-design/icons-vue";
// export default defineComponent({
//   setup() {
//     const navsStore = useNavsStore();
//     const route = useRoute();
//     const router = useRouter();
//     const navTo = (item: any) => {
//       router.push({
//         name: item.name
//       });
//     }

//     // 跳转路由path
//     const toPath = (path: string) => {
//       router.push(path);
//     }

//     // 子菜单
//     const Submenu = (props: any) => (
//       <div class={styles.expendCard}>
//         <div class={styles['expendCardContainer']}>
//           {
//             props.list.map((itemX: any, indexX: number) => (
//               <div class={styles['card-part']}>
//                 <div class={styles['part-title']}>
//                   <div class={styles['title-icon-box']}>
//                     <itemX.icon class={styles['title-icon']} />
//                   </div>
//                   <span class={styles.title}>{itemX.title}</span>
//                 </div>
//                 <div class={styles['part-list']}>
//                   {
//                     itemX?.children.map((itemY: any, indexY: number) => (
//                       <div class={styles['part-item']} onClick={() => { toPath(itemY.path) }}>
//                         {itemY.label}
//                       </div>
//                     ))
//                   }
//                 </div>
//               </div>
//             ))
//           }
//         </div>
//         <div class={styles['expendCardFooter']}>
//           <div class={styles.seeMore} onClick={() => { router.push('/Supermarketlist') }}>查看更多</div>
//         </div>
//       </div>
//     )
//     return () => (
//       <div class={styles.navs}>
//         <div class={styles['navs-area']}>
//           {
//             navsStore.navs.list.map((item: any, index: number) => (
//               <a-dropdown placement="bottom" disabled={!(item.children?.length > 0)} v-slots={{
//                 overlay: () => (
//                   <Submenu list={item.children} />
//                 )
//               }}>
//                 <div class={[styles['nav-item'], item.name === route.name && styles.actived]} onClick={() => navTo(item)}>
//                   <span>{item.label}</span>
//                   {
//                     item.children?.length > 0 && (
//                       <DownOutlined class={styles.expendIcon} />
//                     )
//                   }
//                 </div>
//               </a-dropdown>
//             ))
//           }
//         </div>
//       </div>
//     )
//   }
// })
import { defineComponent } from "vue";
import styles from "./Navs.module.less";
import { useStore as useNavsStore } from "@/store/navs";
import { useRoute, useRouter } from "vue-router";
import { DownOutlined } from "@ant-design/icons-vue";
export default defineComponent({
  setup() {
    const navsStore = useNavsStore();
    const route = useRoute();
    const router = useRouter();
    const navTo = (item: any) => {
      router.push({
        name: item.name
      });
    }

    // 跳转路由path
    const toPath = (path: string) => {
      router.push(path);
    }

    // 子菜单
    const Submenu = (props: any) => (
      <div class={styles.expendCard}>
        <div class={styles['expendCardContainer']}>
          {
            props.list.map((itemX: any, indexX: number) => (
              <div class={styles['card-part']}>
                <div class={styles['part-title']}>
                  <div class={styles['title-icon-box']}>
                    <itemX.icon class={styles['title-icon']} />
                  </div>
                  <span class={styles.title}>{itemX.title}</span>
                </div>
                <div class={styles['part-list']}>
                  {
                    itemX?.children.map((itemY: any, indexY: number) => (
                      <div class={styles['part-item']} onClick={() => { toPath(itemY.path) }}>
                        {itemY.label}
                      </div>
                    ))
                  }
                </div>
              </div>
            ))
          }
        </div>
        <div class={styles['expendCardFooter']}>
          <div class={styles.seeMore} onClick={() => { router.push('/Supermarketlist') }}>查看更多</div>
        </div>
      </div>
    )
    return () => (
      <div class={styles.navs}>
        <div class={styles['navs-area']}>
          {
            navsStore.navs.list.map((item: any, index: number) => (
              <a-dropdown placement="bottom" disabled v-slots={{
                overlay: () => (
                  <Submenu list={item.children} />
                )
              }}>
                <div class={[styles['nav-item'], item.name === route.name && styles.actived]} onClick={() => navTo(item)}>
                  <span>{item.label}</span>
                </div>
              </a-dropdown>
            ))
          }
        </div>
      </div>
    )
  }
})